<template>
  <div class="base">
    <canvas id="webgl"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import * as THREE from "three";
import * as dat from "lil-gui";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import utils from "@/utils";


onMounted(() => {
  console.log(utils);
  init();
});

const guiRef = ref();
onUnmounted(() => {
  guiRef.value.destroy();
})

const init = () => {
  // ----------------------------场景--------------------------
  // 创建场景
  const canvas = document.querySelector("#webgl");
  // 获取场景实例
  const scene = new THREE.Scene();
  // 场景渲染尺寸
  const baseBox = document.querySelector(".base");
  const sizes = {
    width: baseBox.clientWidth,
    height: baseBox.clientHeight,
  };
  // ----------------------------辅助线--------------------------
  let axesHelper = new THREE.AxesHelper(100);
  //   scene.add(axesHelper)
  const gridHelper = new THREE.GridHelper(100, 100);
  //   scene.add(gridHelper)

  console.log(scene);
  // ----------------------------物体--------------------------
  // 几何体
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  // 材质
  const material = new THREE.MeshBasicMaterial({ color: 0x3963bc });
  // 合成网格模型
  const mesh = new THREE.Mesh(geometry, material);
  // 加入场景
  scene.add(mesh);

  // ----------------------------监听网页拉伸--------------------------
  window.addEventListener("resize", () => {
    // Update sizes
    sizes.width = baseBox.clientWidth;
    sizes.height = baseBox.clientHeight;

    console.log(baseBox.clientWidth);
    // Update camera
    camera.aspect = sizes.width / sizes.height;
    camera.updateProjectionMatrix();

    // Update renderer
    renderer.setSize(sizes.width, sizes.height);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
  });
  // --------------------------双击全屏------------------------------
  //   window.addEventListener("dblclick", () => {
  //     const fullscreenElement =
  //       document.fullscreenElement || document.webkitFullscreenElement;
  //     if (!fullscreenElement) {
  //       if (canvas.requestFullscreen) {
  //         canvas.requestFullscreen();
  //       } else if (canvas.webkitRequestFullscreen) {
  //         canvas.webkitRequestFullscreen();
  //       }
  //     } else {
  //       if (document.exitFullscreen) {
  //         document.exitFullscreen();
  //       } else if (document.webkitExitFullscreen) {
  //         document.webkitExitFullscreen();
  //       }
  //     }
  //   });
  // --------------------------相机相关------------------------------
  // 基础相机
  const camera = new THREE.PerspectiveCamera(
    75,
    sizes.width / sizes.height,
    0.1,
    100
  );
  camera.position.z = 3;
  camera.position.y = 1;
  camera.position.x = 1;
  scene.add(camera);

  // 相机控制器
  const controls = new OrbitControls(camera, canvas);
  // 添加阻尼感
  controls.enableDamping = true;

  // --------------------------渲染------------------------------
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    antialias: true,
  });

  renderer.setSize(sizes.width, sizes.height);
  //设置canvas的像素比为当前设备的屏幕像素比或者2之间的最小值，避免高分屏下模糊
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  // --------------------------动画------------------------------
  const clock = new THREE.Clock();
  const tick = () => {
    const elapsedTime = clock.getElapsedTime();
    // console.log(elapsedTime);
    // Update controls
    controls.update();

    // Render
    renderer.render(scene, camera);

    // Call tick again on the next frame
    window.requestAnimationFrame(tick);
  };
  tick();

  // --------------------------调试器------------------------------
  guiRef.value = new dat.GUI({
    width: 400,
  });
  const debugObject = {
    // 需要调试的内容
    bgColor: "#90acc6",
    axesHelper: false,
    gridHelper: false,
  };
  renderer.setClearColor(debugObject.bgColor);
  guiRef.value
    .addColor(debugObject, "bgColor")
    .name("背景颜色")
    .onChange(() => {
      renderer.setClearColor(debugObject.bgColor);
    });
  guiRef.value
    .add(debugObject, "axesHelper")
    .name("辅助轴")
    .onChange((e) => {
      if (e) {
        scene.add(axesHelper);
      } else {
        scene.children = scene.children.filter(item => item.type != 'AxesHelper')
      }
    });
  guiRef.value
    .add(debugObject, "gridHelper")
    .name("辅助网格")
    .onChange((e) => {
      if (e) {
        scene.add(gridHelper);
      } else {
        scene.children = scene.children.filter(item => item.type != 'GridHelper')
      }
    });
};
</script>
<style lang="scss" scoped>
.base {
  width: 100%;
  height: 100%;
  background-color: #ffffff;

  #webgl {
    width: 100%;
    height: 100%;
  }
}
</style>